<template>
    <div class="admin_app_list">
        <div @click="open('/admin/list')" class="admin_app_item">
            <el-icon class="admin_app_icon" :size="35">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M704 192h160v736H160V192h160v64h384v-64zM288 512h448v-64H288v64zm0 256h448v-64H288v64zm96-576V96h256v96H384z"></path></svg>
            </el-icon>
            <span class="admin_app_item_span">用户列表</span>
        </div>

        <div @click="open('/root/code')" v-if="is_root" class="admin_app_item">
            <el-icon class="admin_app_icon" :size="35">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="m64 448 832-320-128 704-446.08-243.328L832 192 242.816 545.472 64 448zm256 512V657.024L512 768 320 960z"></path></svg>
            </el-icon>
            <span class="admin_app_item_span">邀请码</span>
        </div>
    </div>
</template>

<script>
    import {ElMessage} from "element-plus";

    export default {
        name: "AdminIconItem",
        props: {
            is_root: Boolean
        },
        data() {
            return {

            }
        },
        methods: {
            go(url){
                this.$router.push(url)
            },
            open(url){
                window.open(url)
            },
            tips(){
                ElMessage('功能暂未实现，敬请期待')
            }
        },
    }
</script>

<style scoped>
    .admin_app_list{
        display: flex;
        flex-direction: row;
        /*justify-content: space-around;*/

        padding-bottom: 16px;
    }

    .admin_app_item{
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;

        width: 25%;

        padding-bottom: 16px;
    }

    .admin_app_item:hover{
        cursor: pointer;
    }

    .admin_app_item_span{
        position: absolute;
        font-size: 12px;
        color: rgba(48, 49, 51, 0.95);
        bottom: 0;
    }

    .admin_app_icon{
        color: rgba(239, 116, 129, 0.75);
    }
</style>